<template>
	<view class="f-column" style="background-color: #FFFFFF;">
		<view class="f-column" v-for="(item,index) in list" :key="index" @click.stop="chooseIndex(index,deep,item)">
			<view :class="item['children'] ? chooseIndexArr[deep] == index ?  'item-text nav-icon' : 'item-text nav-icon'
																			: 'item-text nav-icon'"
			 :style="'padding-left:'+ ((deep + 1) *25) + 'px;'">
			 <!-- + 'left:' + ((deep + 1)*25 - 20) + 'px' -->
				{{item.attachment_category_name}}
			</view>
			<picselector v-if="item['children'] && chooseIndexArr[deep] == index" :list="item['children']" :deep="deep + 1"
			 :chooseIndexArr="chooseIndexArr" :info="info"></picselector>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'picselector',
		props: {
			list: {
				type: [Array, Object],
				default: function() {
					return [];
				}
			},
			deep: {
				type: [Number],
				default: 0
			},
			info: {
				type: [Object , Boolean],
				default: false
			}
		},
		data() {
			return {
				chooseIndexArr: [],
				infoset: this.info
			};
		},
		watch: {
			info: function(newV , oldV) {
				console.log(newV , oldV);
			}
		},
		methods: {
			chooseIndex(index, deep , item) {
				let arr = JSON.parse(JSON.stringify(this.chooseIndexArr));
				if(item.children) {
					uni.showModal({
						title: '是否查看该分类的图片？否则打开下一级。',
						success: (res) => {
							if(res.confirm) {
								uni.navigateTo({
									url: '/pages/pic-list/pic-list?id=' + item.attachment_category_id + '&title=' + item.attachment_category_name + '&info=' + this.infoset
								});
							}else{
								arr[deep] = index;
								this.chooseIndexArr = arr;
							}
						}
					});
				}else {
					uni.setStorageSync('STORAGE_DATA',this.infoset);
					uni.navigateTo({
						url: '/pages/pic-list/pic-list?id=' + item.attachment_category_id + '&title=' + item.attachment_category_name
					});
				}

			}
		}
	}
</script>

<style>
	.f-column {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.item-text {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
	}

	.nav-icon,
	.nav-icon-rotate {
		position: relative;
	}

	.nav-icon:after,
	.nav-icon-rotate::after {
		content: " ";
		height: 15rpx;
		width: 15rpx;
		border-width: 1px 1px 0 0;
		border-color: #999999;
		border-style: solid;
		transform: rotate(45deg);
		position: absolute;
		margin-top: -10rpx;
		top: 50%;
	}

	.nav-icon-rotate::after {
		animation: rotate .2s linear 1;
		animation-fill-mode: forwards;
	}

	@keyframes rotate {
		from {
			transform: rotate(45deg);
		}

		to {
			transform: rotate(135deg);
		}
	}
</style>
